<template>
  <div>
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
        input-align="center"
      />
    </form>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>1</van-swipe-item>
      <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
    </van-swipe>
    <van-grid>
      <van-grid-item icon="photo-o" text="整租" />
      <van-grid-item icon="photo-o" text="合租" />
      <van-grid-item icon="photo-o" text="地图找房" />
      <van-grid-item icon="photo-o" text="去出租" />
    </van-grid>
  </div>
</template>
<script>
import { Toast } from 'vant'

export default {
  name: 'HomePage',
  data () {
    return {
      value: ''
    }
  },
  computed: {},
  watch: {},
  methods: {
    onSearch (val) {
      Toast(val)
    },
    onCancel () {
      Toast('取消')
    }
  }
}
</script>
<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
</style>
